<template>
  <div>
    <hzhy-form-renderer
      ref="formRender"
      v-model="formData"
      label-position="top"
      isFull
      :content="content"
    >
    </hzhy-form-renderer>
  </div>
</template>

<script>
import TabinConfigDialog from '@/container/configure/component/tabin-config-dialog.vue'
import { DEFAULT_PREDEFINE } from '@/const/system'

export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      formData: {},
    }
  },
  computed: {
    content() {
      return [
        {
          $id: 'list',
          label: '',
          component: TabinConfigDialog,
        },
        {
          $id: 'defaultColor',
          $type: 'color-picker',
          label: '默认背景色',
          $el: {
            predefine: DEFAULT_PREDEFINE,
          },
        },
        {
          $id: 'activeColor',
          $type: 'color-picker',
          label: '选中背景色',
          $el: {
            predefine: DEFAULT_PREDEFINE,
          },
        },
      ]
    },
  },
  watch: {
    componentData: {
      handler(value) {
        // 初始化默认值
        this.formData = { ...value }
      },
      immediate: true,
    },
    formData: {
      handler(value) {
        this.$emit('change', value)
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {},
}
</script>

<style lang="less" scoped>
.tab-box {
}
</style>
